<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <meta name="referrer" content="no-referrer">
  <title>Document</title>
  <!-- <link rel="stylesheet" href="../tools/bootstrap-3.3.7-dist/css/bootstrap.min.css"> -->
  <link rel="stylesheet" href="../css/base.css">
  <!-- <link rel="stylesheet" href="../css/index.css"> -->
  <style>
    .jumbotron{
      padding: 0;
      background-color: white;
    }
    .jumbotron .top{
      width: 100%;
      height: 40px;
      text-align: center;
      float: left;
      padding-top: 0;
      background: black;
    }
    .jumbotron .top>.NavBar{
      width: 1226px;
      height: 40px;
      font-size: 12px;
      float: left;
      /* background-color: red; */
      margin: 0 50%;
      transform: translateX(-50%);
    }
    .jumbotron .top>.NavBar>.left{
      width: 800px;
      float: left;
    }
    .jumbotron .top>.NavBar>.right{
      float: right;
    }
    .jumbotron .top>.NavBar>ul>li{
      height: 40px;
      padding: 0 2px;
      line-height: 40px;
      float: left;
      margin: 0 auto;
    } 
    .jumbotron .top>.NavBar>ul>li>span{
      color: #B0B0B0;
      padding-left: 4px;
    }
    .clear::after{
      display: block;
      content:'';
      clear: both;
    }
    .jumbotron .top>.NavBar>ul>li>a{
      color: #B0B0B0;
    }
    .jumbotron .top>.NavBar>ul>li>a:hover{
      color: white;
    }
    .jumbotron .top2{
      width: 1226px;
      height: 100px;
      float: left;
      margin: 0 50%;
      transform: translateX(-50%);
      /* background-color: greenyellow; */
    }
    .jumbotron .top2>img{
      width: 50px;
      height: 50px;
      margin: 25px;
      float: left;
    }
    .jumbotron .top2>ul{
      width: 1130px;
      height: 100px;
      margin-top: -100px;
      float: right;
    }
    .jumbotron .top2>ul>li{
      width: 84px;
      height: 100px;
      line-height: 100px;
      text-align: center;
      padding-right: 0;
      float: left;
    }
    .jumbotron .top2>ul>li>input{
      width: 230px;
      height: 50px;
      line-height: 50px;
      margin-left: 50px;
      background-color: gainsboro;
    }
    .jumbotron .top2>ul>li>a{
      color: black;
    }
    .jumbotron .top2>ul>li>a:hover{
      color: orange;
    }
    .jumbotron .banner{
      width: 1226px;
      height: 460px;
      margin: 5px auto;
      cursor: pointer;
      /* border: 3px solid #000; */
      position: relative;
      overflow: hidden;
    }
    .jumbotron .banner>.left{
      width: 234px;
      height: 460px;
      position: absolute;
      left: 0;
      top: 0;
      z-index: 99;
      background-color: rgba(105,101,101,.6);
    }
    .jumbotron .banner>.left>ul.list{
      /* float: left; */
      width: 234px;
      height: 420px;
      margin: 16px 0;
      /* background-color: yellow; */
      display: flex;
      flex-direction: column;
    }
    .jumbotron .banner>.left>.list>li{
      flex: 1;
      height: 42px;
      font-size: 20px;
      line-height: 42px;
    }
    .jumbotron .banner>.left>.list>li>a{
      font-size: 16px;
      padding-left: 15px;
      color: #fff;
    }
    .jumbotron .banner>.left>.list>li>span{
      float: right;
      color: #fff;
      font-size: 16px;
      padding-right: 15px;
    }
    .jumbotron .banner>.left>.list>li:hover{
      background-color: orange;
    }

    .jumbotron .banner>.right1{
      position: absolute;
      top: 0;
      left: 0;
      /* background-color: greenyellow;  */
      width: 1226px;
      height: 100%;
      overflow: hidden; 
    }
    .jumbotron .banner>.right1>.loop{
      width: 500%;
      height: 100%;
      position: absolute;
      top:0;
      left: 0;
    }
    .jumbotron .banner>.right1>.loop>li{
      width: 1226px;
      height: 460px;
      float: left;
    }
    .jumbotron .banner>.right1>.loop>li>img{
      width: 100%;
      height: 460px;
    }

    .jumbotron .banner>.right1>ol{
        height: 30px;
        position: absolute;
        bottom:20px;
        right: 20px;
        /* transform: translateX(-50%); */
        /* border-radius: 20px; */
        /* background: rgba(0, 0, 0, .5); */
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .banner>.right1>ol>li{
        width: 10px;
        height: 10px;
        border-radius: 50%;
        background: #fff;
        margin: 0 5px;
        cursor: pointer;
        border: 1px solid black;
    } 
    .banner>.right1>ol>li.active{
        background: lightgray;
    }
    .banner>.right1>div.btn{
        width: 100%;
        height: 50px;
        position: absolute;
        left: 0;
        top:50%;
        transform: translateY(-50%); 
        display: flex;
        justify-content: space-between;
        align-items: center;
        border: none;
    }
    .banner>.right1>div.btn>a{
        display: flex;
        justify-content: center;
        align-items: center;
        width: 50px;
        height: 70px;
        margin-left: 234px;
        font-size: 30px;
        color: rgb(199, 193, 193);
        text-decoration: none; 
    }
    .banner>.right1>div.btn>a:hover{
      background-color: rgba(0, 0, 0, .5);
      color:#fff;
    }

    .jumbotron .footer{
      margin: 0 auto;
      margin-top: 10px;
      width: 1226px;
      height: 170px;
      /* background-color: red; */
    }
    .jumbotron .footer>.left>ul{
      width: 234px;
      height: 170px;
      margin: 0;
      float: left;
      background-color: #333333;
    }
    .jumbotron .footer>.left>ul>li{
      width: 78px;
      height: 85px;
      text-align: center;
      float: left;
    }
    .jumbotron .footer>.left>ul>li>a{
      color: lightgray;
    }
    .jumbotron .footer>.left>ul>li>a:hover{
      color: white;
    }
    .jumbotron .footer>.left>ul>li:hover{
      background-color: rgba(255, 255, 255, .1);
    }
  </style>
</head>
<body>
  <div class="jumbotron">
    <div class="top">
      <div class="NavBar">
        <ul class="left">
          <li><a href="javascript:;" name="cart" class="" role="button" >小米商城</a><span>|</span></li>
          <li><a href="javascript:;" name="cart" class="" role="button" >MIUI</a><span>|</span></li>
          <li><a href="javascript:;" name="cart" class="" role="button" >IoT</a><span>|</span></li>
          <li><a href="javascript:;" name="cart" class="" role="button" >云服务</a><span>|</span></li>
          <li><a href="javascript:;" name="cart" class="" role="button" >天星数科</a><span>|</span></li>
          <li><a href="javascript:;" name="cart" class="" role="button" >有品</a><span>|</span></li>
          <li><a href="javascript:;" name="cart" class="" role="button" >小爱开放平台</a><span>|</span></li>
          <li><a href="javascript:;" name="cart" class="" role="button" >企业团购</a><span>|</span></li>
          <li><a href="javascript:;" name="cart" class="" role="button" >资质证照</a><span>|</span></li>
          <li><a href="javascript:;" name="cart" class="" role="button" >协议规则</a><span>|</span></li>
          <li><a href="javascript:;" name="cart" class="" role="button" >下载app</a><span>|</span></li>
          <li><a href="javascript:;" name="cart" class="" role="button" >智能生活</a><span>|</span></li>
          <li><a href="javascript:;" name="cart" class="" role="button" >Select Location</a></li>
        </ul>
        <ul class="right">
          <li><a href="./reg.html" class="" role="button" >注册</a>
          <li><a href="javascript:;" name="login"  class="" role="button" >登录</a></li>
          <li><a href="javascript:;" name="logout" class="" role="button" >退出登录</a></li>
          <li><a href="javascript:;" name="cart" class="" role="button" >购物车</a></li>
        </ul>
      </div>
    </div>

    <div class="top2">
        <img src="../message/logo.png" alt="">
        <ul>
          <li><a href="javascript:;" name="cart" class="" role="button" ></a></li>
          <li><a href="javascript:;" name="cart" class="" role="button" >小米手机</a></li>
          <li><a href="javascript:;" name="cart" class="" role="button" >Redmi</a></li>
          <li><a href="javascript:;" name="cart" class="" role="button" >电视</a></li>
          <li><a href="javascript:;" name="cart" class="" role="button" >笔记本</a></li>
          <li><a href="javascript:;" name="cart" class="" role="button" >家电</a></li>
          <li><a href="javascript:;" name="cart" class="" role="button" >路由器</a></li>
          <li><a href="javascript:;" name="cart" class="" role="button" >智能硬件</a></li>
          <li><a href="javascript:;" name="cart" class="" role="button" >服务</a></li>
          <li><a href="javascript:;" name="cart" class="" role="button" >社区</a></li>
          <li><input type="text" placeholder=""></li>
        </ul>   
    </div>

    <div class="banner">
      <div class="left">
        <ul class="list">
        <li>
          <a class="" href="./list.html?cat_one_id=手机相机" role="button">手机 电话卡</a>
          <span>></span>
        </li>
        <li>
          <a class="" href="./list.html?cat_one_id=厨卫电器" role="button">电视 盒子</a>
          <span>></span>
        </li>
        <li>
          <a class="" href="./list.html?cat_one_id=电脑办公" role="button">笔记本 显示器</a>
          <span>></span>
        </li>
        <li>
          <a class="" href="./list.html?cat_one_id=大家电" role="button">家电 插板</a>
          <span>></span>
        </li>
        <li>
          <a class="" href="./list.html?cat_one_id=其他" role="button">出行 穿戴</a>
          <span>></span>
        </li>
        <li>
          <a class="" href="./list.html?cat_one_id=海外购" role="button">智能 路由器</a>
          <span>></span>
        </li>
        <li>
          <a class="" href="./list.html?cat_one_id=生活电器" role="button">电源 配件</a>
          <span>></span>
        </li>
        <li>
          <a class="" href="./list.html?cat_one_id=食品酒水" role="button">健康 儿童</a>
          <span>></span>
        </li>
        <li>
          <a class="" href="./list.html?cat_one_id=珠宝首饰" role="button">耳机 音箱</a>
          <span>></span>
        </li>
        <li>
          <a class="" href="./list.html?cat_one_id=皮具箱包" role="button">生活 箱包</a>
          <span>></span>
        </li>
      </ul>
      </div>

      <div class="right1">
        <ul class="loop">
          <!-- <li>
            <img src="../message/2.jpg" alt="">
          </li> -->
        </ul>
        <ol>
          <!-- <li class="active"></li>
          <li></li> -->
        </ol>
        <div class="btn">
          <a href="JavaScript:;" name="left">&lt;</a>
          <a href="JavaScript:;" name="right">&gt;</a>
        </div>
      </div>
      
    </div>

    <div class="footer">
      <div class="left">
        <ul >
          <li>
            <a href="javascript:;"></a><img src="../message/小米秒杀.png" alt="" style="width: 36px; height: 36px;margin: 10px auto;"></a>
            <a href="javascript:;" name="cart" class="" role="button" >小米秒杀</a>
          </li>
          <li>
            <a href="javascript:;"></a><img src="../message/企业团购.png" alt="" style="width: 36px; height: 36px;margin: 10px auto;"></a>
            <a href="javascript:;" name="cart" class="" role="button" >企业团购</a>
          </li>
          <li>
            <a href="javascript:;"></a><img src="../message/f码通道.png" alt="" style="width: 36px; height: 36px;margin: 10px auto;"></a>
            <a href="javascript:;" name="cart" class="" role="button" >F码通行</a>
          </li>
          <li>
            <a href="javascript:;"></a><img src="../message/米粉卡.png" alt="" style="width: 36px; height: 36px;margin: 10px auto;"></a>
            <a href="javascript:;" name="cart" class="" role="button" >米粉卡</a>
          </li>
          <li>
            <a href="javascript:;"><img src="../message/以旧换新.png" alt="" style="width: 36px; height: 36px;margin: 10px auto;"></a>
            <a href="javascript:;" name="cart" class="" role="button" >以旧换新</a>
          </li>
          <li>
            <a href="javascript:;"><img src="../message/话费充值.png" alt="" style="width: 36px; height: 36px;margin: 10px auto;"></a>
            <a href="javascript:;" name="cart" class="" role="button" >话费充值</a>
          </li>
        </ul>
        <div class="right">
          <img src="../message/7.jpg" alt="" style="width: 316px; height: 170px;float: left;margin: 0 14.5px;">
          <img src="../message/8.jpg" alt="" style="width: 316px; height: 170px;float: left;margin: 0 15px 0 0;">
          <img src="../message/9.jpg" alt="" style="width: 316px; height: 170px;float: left;">
        </div>
      </div>
    </div>

    <!-- <div class="navigation"> 
      
        
    </div> -->
    
  </div>

  <script src="../js/jquery.min.js"></script>
  <script src="../js/cookie.js"></script>
  <script src="../js/loop.js"></script>
  <script src="../js/tools.js"></script>
  
  <script>
    

    // 2，退出登录按钮 添加 点击事件
    $('[name="logout"]').click(function(){
      const cookieObj = myGetCookie();

      // 如果 cookie对象中 调用 login 键名 
      // 如果 结果是 undefined 证明 没有login键名 没有登录
      if (cookieObj.login === undefined) {
        window.alert('您还没有登录，请先登录');
      } else {
        // 有登录信息在退出登录
        // 设定 cookie 时效为 负数 键名和路径 是 原始的键名和路径
        mySetCookie('login' , 1 , -1 , '/');
        window.alert('您已退出登录');
      }
    })

    //3，购物车按钮 添加 点击事件
    $('[name="cart"]').click(function(){
      // 获取cookie对象
      const cookieObj = myGetCookie();

      // 如果 cookie对象 调用 login属性 结果是 undefined 证明没有登录
      if( cookieObj.login === undefined ){
        // 弹出 确认框 判断执行操作
        if( window.confirm('您还没有登录,点击确定,跳转登录页面') ){
          // 如果 点击确定 window.confirm() 是 true
          // 执行 程序 跳转 登录页面
          window.location.href = './login.html';
        }
      }else{
        // 如果 login 有数据 证明已经登录 跳转购物车页面
        window.location.href = './cart.html';
      }
    })

    //4, 轮播图
    var arr = [
      {id:1, width:1226 , height: 460, size: 44.4 , path: 'big1.jpg', type: 'JPEG'},
      {id:2, width:1226, height: 460, size: 52.5 , path: 'big2.jpg', type: 'JPEG'},
      {id:3, width:1226 , height: 460, size: 63.3 , path: 'big3.jpg', type: 'JPEG'},
      {id:4, width:1226 , height: 460, size: 259 , path: 'big4.jpg', type: 'JPEG'},
      {id:5, width:1226 , height: 460, size: 12.5 , path: 'big5.jpg', type: 'JPEG'},
    ];

    const oBanner = document.querySelector('.right1');

    // 通过 加载外部文件 加载 构造函数 生成 实例化对象
    const bannerObj1 = new SetBanner(oBanner , arr);
    // 调用 一个 函数 执行所有需要执行的程序
    bannerObj1.init();

    //5，给登录按钮添加点击事件
    $('[name="login"]').click(function(){
      window.location.href = `./login.html?url=${window.location.href}`;
    })

    //5，楼层导航



  </script>
  
</body>
</html>
